<template>
  <div
    class="main-page"
    style="min-width:1366px;"
  >
    <el-form ref="form">
      <!-- 搜索栏 -->
      <BaseSearchBar v-on:ChildSearchEvent="getSearchAllerList"></BaseSearchBar>
    </el-form>
    <!-- 表单 -->
    <el-card
      :body-style="{ padding: '0px' }"
      class="box-card"
    >
      <!-- <div class="SearchT">
        <div class="tableLable">数据管理列表</div>
        <el-button
          type="danger"
          class="BatchDeleBtn"
          style="width:80px"
          size="small"
        >批量删除</el-button>
        <el-button
          type="primary"
          class="exportBtn"
          style="width:80px"
          size="small"
        >导出</el-button>
      </div> -->
      <div class="tableStyle">
        <el-table
          ref="multipleTable"
          class="card-table"
          :data="AllergenicList"
          style="font-size:12px"
          tooltip-effect="dark"
          :header-cell-style="{ background: '#3F9DFD', color: '#FFF' }"
          size="medium"
          height="634px"
          stripe
          border
        >
          <!-- 
          <el-table-column label="全选"
                           type="selection"
                           width="40">
          </el-table-column>-->
          <el-table-column
            label="序号"
            type="index"
            width="50"
          ></el-table-column>
          <el-table-column
            prop
            label="操作"
            show-overflow-tooltip
            width="50"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="dialogAller(scope.row.id)"
              >配对</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="hs_NAME"
            label="医院名称"
            show-overflow-tooltip
            width="120"></el-table-column>
          <el-table-column
            prop="gmydm"
            label="医院过敏源编码"
            show-overflow-tooltip
            width="200"
          />
          <el-table-column
            prop="gmzz"
            label="医院过敏症状"
            show-overflow-tooltip
            width="300"
          />
          <el-table-column
            prop="gmymc"
            label="医院过敏源名称"
            show-overflow-tooltip
            width="200"
          />
          <el-table-column
            prop="mdhsAllerName"
            label="配对过敏源名称"
            show-overflow-tooltip
            width="210"
          />
          <el-table-column
            prop="matchState"
            label="配对状态"
            show-overflow-tooltip
            width="100"
          >
            <template slot-scope="scope">{{(scope.row.matchState==0)?'未配对':(scope.row.matchState==1)?'已配对':'无法配对'}}</template>
          </el-table-column>
          <el-table-column
            label="配对人员"
            show-overflow-tooltip
            width="100"
          >
            <template slot-scope="scope">{{scope.row.matchUser}}</template>
          </el-table-column>
          <el-table-column
            label="时间"
            show-overflow-tooltip
          >
            <template slot-scope="scope">{{getDate(scope.row.matchTime)}}</template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[20, 50, 100]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          ></el-pagination>
        </div>
      </div>
    </el-card>
    <el-dialog
      title="过敏源配对"
      :visible.sync="dialogAllerVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-card class="dialog-card">
        <div
          slot="header"
          class="Card_title"
        >
          <span>本院过敏源信息</span>
        </div>
        <div
          slot="header"
          class="Card_title"
          style="border-left:1.5px solid rgb(192, 192, 192);"
        >
          <span>配对过敏源信息</span>
        </div>
        <div class="Card_body">
          <el-form
            :inline="true"
            :model="dialogData"
            style="text-align:center"
            class="demo-form-inline"
          >
            <el-form-item label="过敏源名称">
              <el-input
                v-model="dialogData.gmymc"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div
          class="Card_body"
          style="border-left:1.5px solid rgb(192, 192, 192);"
        >
          <el-form
            :inline="true"
            :model="dialogData"
            style="text-align:center"
            class="demo-form-inline"
          >
            <el-form-item label="过敏源名称">
              <el-input
                v-model="dialogData.mdhsAllerName"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>

      <el-card
        class="dialog-card2"
        style="margin-top: 12px;"
      >
        <div
          class="Card_body2"
          style="height:40px"
        >
          <el-form
            :inline="true"
            :model="dialogData"
            style="margin-left:15px"
            class="demo-form-inline"
          >
            <el-form-item label="药品信息">
              <el-input
                v-model="dialogData.srm"
                size="mini"
                placeholder="请输入关键字"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                size="mini"
                @click="dialogSearch()"
              >查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          :data="dialogData.AllerListData"
          height="250"
          border
          size="mini"
          style="width: 100%"
          @row-click="handleRow"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            label
            width="35"
          >
            <template slot-scope="scope">
              <el-radio
                :label="scope.row"
                v-model="dialogData.SavePairCode"
                @change.native="handleSelectionChange(scope.row)"
              >&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column
            prop="allerName"
            label="系统过敏源名称"
          ></el-table-column>
        </el-table>
      </el-card>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="danger"
          size="mini"
          @click="close"
        >给药途径无法配对</el-button>
        <el-button
          type="success"
          size="mini"
          @click="SaveEditAller"
        >保存配对</el-button>
        <el-button
          size="mini"
          @click="dialogMatchVisible = false"
        >关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BaseSearchBar from "./BaseSearchBar";
import {
  getAllergenicpairList,
  getdate,
  dialogAllerList,
  SaveAllergenPair,
  dialogSearchAllergen,
  SaveNoAllergenPair
} from "@/api/rad";

export default {
  name: "MainPage",
  components: {
    BaseSearchBar
  },
  data() {
    return {
      multipleSelection: {},
      // 列表的参数对象
      queryInfo: {
        srm: "",
        match_state: "",
        // 当前的页数
        page: 1,
        // 当前页显示多少数据
        pageSize: 20
      },
      dialogAllerVisible: false,

      AllergenicList: [],
      total: 0,
      dialogData: {
        id: "",
        //dialog过敏信息
        gmymc: "",
        mdhsAllerName: "",
        //搜索关键字
        srm: "",
        // 查询最匹配得20个系统过敏源信息
        AllerListData: [],
        // 选中数据id
        dataId: "",
        SavePairCode: ""
      }
    };
  },
  created: function() {
    this.getAllergenicpairList();
  },
  methods: {
    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      // console.log(newSize)
      this.getAllergenicpairList();
    },
    // 当前展示的页面
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      // console.log(newPage)
      this.getAllergenicpairList();
    },
    handleClose(done) {
      done();
    },
    close() {
      this.$confirm("确定无法过敏源?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.SaveNoAllergenPair();
        })
        .catch(() => {});
    },
    async getAllergenicpairList() {
      let _this = this;
      let res = await this.$rad.getAllergenicpairList({
        srm: this.queryInfo.srm,
        match_state: this.queryInfo.match_state,
        page: _this.queryInfo.page,
        pageSize: _this.queryInfo.pageSize
      });
      this.AllergenicList = res.rows;
      this.total = res.total;
      console.log(res);
    },
    async getSearchAllerList(data) {
      this.queryInfo.srm = data.srm;
      this.queryInfo.match_state = data.match_state;
      console.log(this.queryInfo);
      this.getAllergenicpairList();
    },
    //时间戳转时间
    getDate(date) {
      return this.$rad.getdate(date);
    },

    async dialogAller(id) {
      this.dialogData.id = id;
      let res = await this.$rad.dialogAllerList({
        id: id
      });
      this.dialogData.gmymc = res.gmymc;
      this.dialogData.mdhsAllerName = res.mdhsAllerName;
      this.dialogData.srm = res.gmymc;
      // console.log(res)
      this.dialogSearch();
      this.dialogAllerVisible = true;
    },
    async dialogSearch() {
      let res = await this.$rad.dialogSearchAllergen({
        id: this.dialogData.id,
        srm: this.dialogData.srm
      });
      this.dialogData.AllerListData = res;
    },
    async SaveEditAller() {
      console.log(this.dialogData.SavePairCode);
      if (this.dialogData.SavePairCode == "") {
        this.$message.error("未选中配对项");
      } else {
        let res = await this.$rad.SaveAllergenPair({
          id: this.dialogData.id,
          dataId: this.dialogData.SavePairCode.id
        });
        console.log(this.dialogData.SavePairCode);
        if (res.code == 1) {
          this.dialogAllerVisible = false;
          this.getAllergenicpairList();
          return this.$message({
            type: "success",
            message: res.msg
          });
        } else {
          return this.$message({
            type: "error",
            message: res.msg
          });
        }
      }
    },
    async SaveNoAllergenPair() {
      let res = await this.$rad.SaveNoAllergenPair({
        id: this.dialogData.id
      });
      console.log(res);
      if (res.code == 1) {
        this.dialogAllerVisible = false;
        this.getAllergenicpairList();
        return this.$message({
          type: "success",
          message: res.msg
        });
      } else if (res.result == 1) {
        return this.$message({
          type: "error",
          message: res.msg
        });
      }
    },
    handleRow(row) {
      // console.log(row);
      this.dialogData.SavePairCode = row;
      this.multipleSelection = row;
    },
    handleSelectionChange(val) {
      console.log(res);
      this.multipleSelection = val;
    }
  }
};
</script>
<style scoped>
.el-card {
  margin-left: 3px;
}
.SearchT {
  display: flex;
  justify-content: flex-end;
  height: 50px;
  align-items: center;
  background-color: #e6edf3;
  font-size: 14px;
}
.tableLable {
  flex: 1;
  text-align: left;
  margin-left: 15px;
  letter-spacing: 2px;
  font-size: 14px;
  color: #32a6f3;
  font-weight: bold;
}
.exportBtn {
  margin-right: 23px;
}
.BatchDeleBtn {
  margin-right: 15px;
}
.tableStyle {
  width: 100%;
  height: 100%;
}
.card-table {
  height: 75%;
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
.dialog-card >>> .el-card__body {
  padding: 0px 0px;
  width: 100%;
  height: 40px;
  display: flex;
  flex: 1;
  /* background-color: red; */
}
.dialog-card >>> .el-card__header {
  padding: 0px 0px;
  display: flex;
  flex: 1;
}
.dialog-card >>> .Card_title {
  width: 50%;
  height: 25px;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog-card >>> .Card_body {
  width: 50%;
  /* margin-left: 15px; */
  margin-right: 15px;
}
.dialog-card2 >>> .el-card__body {
  padding: 0px 0px;
  width: 100%;
  height: 290px;

  /* background-color: red; */
}
</style>
